<div fxFlexFill fxFlex="100%" pDroppable="farm">
  <div class="map" fxFlexFill pDroppable="farm" (onDrop)="onDrop($event)">
    <div *ngIf="isShowImg">
      <div class="monitor-image" style="background: url('./assets/images/Monitor_Center.png') no-repeat center center;" [ngStyle]="{'top': mCenterX + '%' , 'left': mCenterY + '%'}"></div>
    </div>
    <div *ngFor="let item of farms let i =index" [ngSwitch]="item.farmCategory">
      <app-farm-model pDraggable="farm" *ngSwitchCase="'winfarm'"
                      [ngStyle]='{zoom:zoom}'
                      (onDragStart)="onDragStart($event,item)"
                      (onDragEnd)="onDragEnd($event)"
                      (dblclick)="ondblclick(item)"
                      [farmName]="item?.farmName"
                      [farmX]="item?.posx"
                      [farmY]="item?.posy"
                      [windSpeed]="item?.avgWindSpeed.value"
                      [power]="item?.totalPower.value"
                      [active]="active"
                      [i]="i"
                      [unShowName]="item?.unShowName"
                      [ngClass]="{'on':i == active}"
                      (click)="onClick(i,item)">
      </app-farm-model>
      <app-photovoltaic-model pDraggable="farm" *ngSwitchCase="'photovoltaic'"
                              [ngStyle]='{zoom:zoom}'
                              (onDragStart)="onDragStart($event,item)"
                              (onDragEnd)="onDragEnd($event)"
                              (dblclick)="ondblclick(item)"
                              [farmName]="item?.farmName"
                              [farmX]="item?.posx"
                              [active]="active"
                              [i]="i"
                              [unShowName]="item?.unShowName"
                              [ngClass]="{'on':i == active}"
                              (click)="onClick(i,item)"
                              [farmY]="item?.posy">
      </app-photovoltaic-model>
    </div>
  </div>
</div>
